import React from 'react'
import logo from "@/common/img/logo.png"
import { useHistory, Link } from "umi";
import iconMap from "@/components/IconMap"
export default function BaseSiderBar({ Sider, Menu, CollArrow }) {
    const history = useHistory();
    const pathname = history.location.pathname;
    const routeList = localStorage.getItem("routeList") ? JSON.parse(localStorage.getItem("routeList")) : [];
    return (
        <Sider className='side-bar' theme="light" collapsed={CollArrow}>
            <div className='brand'>
                <div className='logo'>
                    <img src={logo} alt="" />
                    <h1>{!CollArrow && "员工管理系统"}</h1>
                </div>
            </div>
            <div className='menu-container'>
                <Menu mode="inline" selectedKeys={[pathname]}>
                    {routeList.map(item => {
                        return (
                            <Menu.Item key={item.route}>
                                <Link to={item.route}>
                                    {iconMap[item.icon]}
                                    <span>{item.zhName}</span>
                                </Link>
                            </Menu.Item>
                        )
                    })}
                </Menu>
            </div>
        </Sider>
    )
}
